import React, { useState } from "react";
import { Form, Input, Select, InputNumber, Button, Card, Space, message, ConfigProvider } from "antd";
import { ManOutlined, WomanOutlined } from "@ant-design/icons";
import axios from "axios";
import zhCN from "antd/lib/locale/zh_CN";

const { Option } = Select;

export default function StudentForm() {
  const [form] = Form.useForm();
  const [showThanks, setShowThanks] = useState(false);
  const [submitting, setSubmitting] = useState(false);

  const onFinish = async (values) => {
    if (submitting) {                                    // ② 防止重复提交
      message.warning('请不要反复提交');
      return;
    }
    setSubmitting(true);                                 // ③ 进入提交状态
    const payload = { ...values, name: values.name?.trim() || '匿名' ,gender:"未知"};
    try {
      await axios.post("/api/add_student", payload);
      message.success("提交成功！");
      setShowThanks(true);               // 显示感谢卡片
      setTimeout(() => {
        setShowThanks(false);            // 关闭卡片
        window.location.reload();        // 刷新页面
      }, 3000);
    } catch {
      message.error("提交失败，请检查输入！");
      setSubmitting(false);
    }
  };

  return (
    <ConfigProvider locale={zhCN}>
      {showThanks && (
        <div
          style={{
            position: "fixed",
            inset: 0,
            background: "rgba(0,0,0,.45)",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            zIndex: 9999,
          }}
        >
          <Card style={{ width: 320, textAlign: "center" }}>
            <h3>谢谢你的合作</h3>
            <p>3 秒后自动关闭…</p>
          </Card>
        </div>
      )}
      <div style={{ maxWidth: 480, margin: "80px auto", padding: 24 }}>
        <Card title="学生信息采集" variant={false}>
          <Form form={form} layout="vertical" onFinish={onFinish}>
            <Form.Item
              label="姓名"
              name="name"
              rules={[{ message: "请输入姓名" }]}
              extra="欢迎使用真实姓名，输入昵称也行，只要自己能区分即可"
            >
              <Input placeholder="请输入学生姓名" />
            </Form.Item>

{/*             <Form.Item
              label="性别"
              name="gender"
              initialValue="男"
              rules={[{ required: true }]}
            >
              <Select>
                <Option value="男"><ManOutlined /> 男</Option>
                <Option value="女"><WomanOutlined /> 女</Option>
              </Select>
            </Form.Item> */}

            <Form.Item
              label="身高 (cm)"
              name="height"
              rules={[{ required: true, type: "integer" }]}
            >
              <InputNumber
                style={{ width: "100%" }}
              />
            </Form.Item>

            <Form.Item
              label="体重 (kg)"
              name="weight"
              rules={[{ required: true, type: "number" }]}
            >
              <InputNumber
                style={{ width: "100%" }}
                step={1}
              />
            </Form.Item>

            <Form.Item
              label="最大的爱好"
              name="hobby"
              initialValue="运动"
              rules={[{ required: true }]}
            >
              <Select>
                <Option value="运动">🏃 运动</Option>
                <Option value="聊天">💬 聊天</Option>
                <Option value="阅读">📖 阅读</Option>
                <Option value="游戏">🎮 游戏</Option>
                <Option value="其他">🎲 其他</Option>
              </Select>
            </Form.Item>

            <Form.Item>
              <Space>
                <Button type="primary" htmlType="submit" loading={submitting}>提交</Button>
              </Space>
            </Form.Item>
          </Form>
        </Card>
      </div>
    </ConfigProvider>
  );
}